<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <Header></Header>
      </el-header>
      <el-main class="common-layout-main flex justify-content-center">
        <el-row :gutter="20">
          <el-col :span="2"><div class="grid-content ep-bg-purple text-center" />
          <!-- 导航 -->
                <Router-Link to="/select-group" class="category-item">
          <el-icon>
            <CircleCheck />
          </el-icon>
          <div>选择</div>
        </Router-Link>
        <Router-Link to="/input-group" class="category-item">
          <el-icon>
            <EditPen />
          </el-icon>
          <div>文本输入</div>
        </Router-Link>
        <Router-Link to="/advanced-group" class="category-item">
          <el-icon>
            <Files />
          </el-icon>
          <div>高级题型</div>
        </Router-Link>
        <Router-Link to="/note-group" class="category-item">
          <el-icon>
            <ChatLineSquare />
          </el-icon>
          <div>备注说明</div>
        </Router-Link>
        <Router-Link to="/personal-info-group" class="category-item">
          <el-icon>
            <User />
          </el-icon>
          <div>个人信息</div>
        </Router-Link>
        <Router-Link to="/contact-group" class="category-item">
          <el-icon>
            <Message />
          </el-icon>
          <div>联系方式</div>
        </Router-Link>
          </el-col>
          <el-col :span="22"><div class="grid-content ep-bg-purple" />
            <RouterView />
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>
<script lang="ts" setup>
// 引入组件
import Header from '@/components/Common/Header.vue'
// 引入对应图标
import { CircleCheck, Files, EditPen, ChatLineSquare, User, Message } from '@element-plus/icons-vue'

</script>
<style lang="scss" scoped>
.common-layout-main{
  width: 100%;
    .el-row {
      width: 80%;
    }
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
